import QtQuick
import QtQuick.Controls
import QtQuick.Layouts

Rectangle {
    id: pieChartContainer
    color: "white"
    radius: 10
    border.color: "#e0e0e0"
    border.width: 1
    
    ColumnLayout {
        anchors.fill: parent
        anchors.margins: 15
        spacing: 10
        
        // 标题
        Text {
            text: "基站状态分布"
            font.pixelSize: 18
            font.bold: true
            color: "#2c3e50"
        }
        
        // 图表和图例
        RowLayout {
            Layout.fillWidth: true
            Layout.fillHeight: true
            spacing: 20
            
            // 饼图
            Item {
                Layout.fillHeight: true
                Layout.preferredWidth: parent.width * 0.55
                
                Canvas {
                    id: pieCanvas
                    anchors.centerIn: parent
                    width: Math.min(parent.width, parent.height)
                    height: width
                    
                    property var chartData: []
                    
                    Connections {
                        target: baseStationModel
                        function onDataChanged() {
                            pieCanvas.updateChartData()
                            pieCanvas.requestPaint()
                        }
                    }
                    
                    Component.onCompleted: {
                        updateChartData()
                    }
                    
                    function updateChartData() {
                        var normal = 0, warning = 0, critical = 0, offline = 0
                        
                        for (var i = 0; i < baseStationModel.rowCount(); i++) {
                            var info = baseStationModel.getStationInfo(i)
                            switch(info.status) {
                                case "normal": normal++; break
                                case "warning": warning++; break
                                case "critical": critical++; break
                                case "offline": offline++; break
                            }
                        }
                        
                        chartData = [
                            {label: "正常", value: normal, color: "#27ae60"},
                            {label: "警告", value: warning, color: "#f39c12"},
                            {label: "严重", value: critical, color: "#e74c3c"},
                            {label: "离线", value: offline, color: "#95a5a6"}
                        ]
                    }
                    
                    onPaint: {
                        var ctx = getContext("2d")
                        ctx.clearRect(0, 0, width, height)
                        
                        if (chartData.length === 0) return
                        
                        var total = 0
                        for (var i = 0; i < chartData.length; i++) {
                            total += chartData[i].value
                        }
                        
                        if (total === 0) return
                        
                        var centerX = width / 2
                        var centerY = height / 2
                        var radius = Math.min(width, height) / 2 - 10
                        var innerRadius = radius * 0.5
                        
                        var startAngle = -Math.PI / 2
                        
                        // 绘制饼图
                        for (var i = 0; i < chartData.length; i++) {
                            var sliceAngle = (chartData[i].value / total) * Math.PI * 2
                            var endAngle = startAngle + sliceAngle
                            var midAngle = startAngle + sliceAngle / 2
                            
                            // 绘制扇形
                            ctx.beginPath()
                            ctx.moveTo(centerX, centerY)
                            ctx.arc(centerX, centerY, radius, startAngle, endAngle)
                            ctx.closePath()
                            ctx.fillStyle = chartData[i].color
                            ctx.fill()
                            
                            // 绘制内圆（环形图效果）
                            ctx.beginPath()
                            ctx.arc(centerX, centerY, innerRadius, 0, Math.PI * 2)
                            ctx.fillStyle = "white"
                            ctx.fill()
                            
                            // 绘制百分比标签
                            if (chartData[i].value > 0) {
                                var labelRadius = radius * 0.75
                                var labelX = centerX + Math.cos(midAngle) * labelRadius
                                var labelY = centerY + Math.sin(midAngle) * labelRadius
                                
                                var percentage = ((chartData[i].value / total) * 100).toFixed(1)
                                
                                ctx.font = "bold 14px sans-serif"
                                ctx.fillStyle = "white"
                                ctx.textAlign = "center"
                                ctx.textBaseline = "middle"
                                ctx.fillText(percentage + "%", labelX, labelY)
                            }
                            
                            startAngle = endAngle
                        }
                        
                        // 中心文字
                        ctx.font = "bold 24px sans-serif"
                        ctx.fillStyle = "#2c3e50"
                        ctx.textAlign = "center"
                        ctx.textBaseline = "middle"
                        ctx.fillText(total, centerX, centerY - 10)
                        
                        ctx.font = "12px sans-serif"
                        ctx.fillStyle = "#7f8c8d"
                        ctx.fillText("总基站数", centerX, centerY + 15)
                    }
                }
            }
            
            // 图例
            Column {
                Layout.fillHeight: true
                Layout.fillWidth: true
                spacing: 12
                
                Repeater {
                    model: pieCanvas.chartData
                    
                    Rectangle {
                        width: parent.width
                        height: 50
                        color: "#f8f9fa"
                        radius: 8
                        
                        RowLayout {
                            anchors.fill: parent
                            anchors.margins: 10
                            spacing: 10
                            
                            Rectangle {
                                width: 30
                                height: 30
                                radius: 15
                                color: modelData.color
                            }
                            
                            Column {
                                Layout.fillWidth: true
                                spacing: 3
                                
                                Text {
                                    text: modelData.label
                                    font.pixelSize: 14
                                    font.bold: true
                                    color: "#2c3e50"
                                }
                                
                                Text {
                                    text: modelData.value + " 个基站"
                                    font.pixelSize: 12
                                    color: "#7f8c8d"
                                }
                            }
                            
                            Text {
                                text: {
                                    var total = 0
                                    for (var i = 0; i < pieCanvas.chartData.length; i++) {
                                        total += pieCanvas.chartData[i].value
                                    }
                                    return total > 0 ? ((modelData.value / total) * 100).toFixed(1) + "%" : "0%"
                                }
                                font.pixelSize: 16
                                font.bold: true
                                color: modelData.color
                            }
                        }
                    }
                }
            }
        }
    }
}

